<template>
    <div class="moduleBg">
        <module-title title="群众演员紧缺度"></module-title>
        <div class="tabWrapper">
            <div :class="[{'tab': currIndex != index}, {'tab-active': currIndex == index}]" v-for="(item, index) in tabs" :key="index" @click="onTabClick(index)">
                {{item}}
            </div>
        </div>
        <div ref="lack-left-module2-chart" style="height:352px"></div>
    </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue'
import * as echarts from 'echarts';
export default {
    components: { ModuleTitle },
    props: {
        data: Array
    },
    data() {
        return {
            tabs: ['五级', '四级', '三级', '二级', '一级'],
            currIndex: 0
        }
    },
    watch: {
      data: {
        handler() {
          setTimeout(() => {
            this.showChart(this.chart, 'lack-left-module2-chart', this.getOption())
          }, 100);
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
        onTabClick(index) {
            this.currIndex = index
            this.showChart(this.chart, 'lack-left-module2-chart', this.getOption())
        },
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            } else {
                instance.clear()
            }
            instance.setOption(option);
      },
      getOption() {
            let data = this.data[this.currIndex]
            let serie = {
                type: 'line',
            }
            return {
                grid: {
                    bottom: 50,
                    top: 56,
                    left: 58,
                    right: 30
                },
                // tooltip: this.getTooltipItem(),
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    icon: 'rect',
                    itemWidth: 8,
                    itemGap: 24,
                    itemHeight: 8,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16
                    },
                    // right: 24,
                    top: 20
                },
                xAxis: {
                    data: data.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '月份',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis:[{
                    name: '人数：人',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 16,
                        padding: [0, 0, 0, 0],
                        opacity: 0.72
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                 series:[{
                    name: '申请人数',
                    data: data.map(e => e.value1),
                    yAxisIndex: 0,
                    lineStyle: {
                        color: 'rgba(8,132,255,1)'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(8,132,255,0.0)'
                            }, {
                                offset: 0.8, color: 'rgba(8,132,255,0.3)'
                            }, {
                                offset: 1, color: 'rgba(8,132,255,0.4)'
                            }]
                        }
                    },
                    ...serie
                },{
                    name: '安排人数',
                    data: data.map(e => e.value2),
                    yAxisIndex: 0,
                    lineStyle: {
                        color: 'rgba(255,160,10,1)'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(255,160,10,0)'
                            }, {
                                offset: 0.8, color: 'rgba(255,160,10,0.3)'
                            },{
                                offset: 1, color: 'rgba(255,160,10,0.4)'
                            }]
                        }
                    },
                    ...serie}
                ]

            }
      }
    }

}
</script>
<style lang="less" scoped>
.tabWrapper {
    display: flex;
    position: relative;
    padding-right: 24px;
    padding: 20px;

    cursor: pointer;
}
.tab {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    text-align: center;
    font-weight: 400;
    border: 1px solid rgba(4,74,143,1);
    padding: 4px 0;
    text-align: center;
    flex: 1;

    &-active {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.96px;
        text-align: center;
        font-weight: 400;
        border: 1px solid rgba(100,230,226,1);
        padding: 4px 0;
        text-align: center;
        flex: 1;
        color: #64E6E2;
    }
}
</style>
